import { addUser, deleteUser, queryUserList } from '@/services/user';
import {
  ActionType,
  ProColumns,
  ProForm,
  ProFormInstance,
  ProFormText,
  ProTable,
} from '@ant-design/pro-components';
import { Button, message, Modal, Popconfirm } from 'antd';
import React, { useRef, useState } from 'react';
import styles from './index.less';

const ChannelList: React.FC<unknown> = () => {
  const ref = useRef<ActionType>();

  const [openAdd, setOpenAdd] = useState<boolean>(false);
  const formRef = useRef<ProFormInstance>();

  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'id',
      valueType: 'indexBorder',
      search: false,
    },
    {
      title: '用户名',
      dataIndex: 'name',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <Popconfirm
          key="delete"
          title="删除用户"
          description="是否确认删除?"
          onConfirm={async () => {
            const result = await deleteUser({
              name: record.name,
            });
            ref.current?.reload();
          }}
          okText="是"
          cancelText="否"
        >
          <Button type="link" color="danger" danger>
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <>
      <ProTable
        rowKey="index"
        className={styles.table}
        actionRef={ref}
        search={false}
        columns={columns}
        request={async (params) => {
          const { users } = await queryUserList();
          const data = users.map((item: string, index: number) => ({
            name: item,
            index: index + 1,
          }));
          return {
            data: data,
            success: true,
            total: users.length,
          };
        }}
        toolBarRender={() => [
          <Button key="1" type="primary" onClick={() => setOpenAdd(true)}>
            新建用户
          </Button>,
        ]}
        pagination={{
          pageSize: 10,
        }}
      />
      <Modal
        title="新增用户"
        open={openAdd}
        onCancel={() => setOpenAdd(false)}
        footer={null}
      >
        <ProForm
          formRef={formRef}
          style={{ padding: '10px' }}
          labelCol={{ span: 4 }}
          onFinish={async (params: { name: string; password: string }) => {
            const result = await addUser(params);
            message.success('创建成功');
            setOpenAdd(false);
            formRef.current?.resetFields();
            ref.current?.reload();
          }}
          layout="horizontal"
          submitter={{
            render: (_, dom) => {
              return <div className={styles.model_submit}>{dom}</div>;
            },
          }}
        >
          <ProFormText
            label="用户名"
            name={'name'}
            placeholder={'请输入用户名'}
            rules={[{ required: true, message: '请输入用户名' }]}
          />
          <ProFormText
            label="密码"
            name={'password'}
            placeholder={'请输入密码'}
            rules={[{ required: true, message: '请输入密码' }]}
          />
        </ProForm>
      </Modal>
    </>
  );
};

export default ChannelList;
